<template>
  <view>
    <view class="goods-item-container" >
      <!-- 复选按钮 -->
      <radio value="" color="#C00000" :checked="goods.goods_status" v-if="showRadio" @click="changeStatus"/>
      <view class="goods-item-left" @click="switchPage">
        <image :src="goods.goods_small_logo || defaultPic"></image>
      </view>
      <view class="goods-item-right" @click="switchPage">
        <text class="descrip" style="color: #082746">{{goods.goods_name}}</text>
        <view class="price">
          <text style="color: #C00000;font-weight: 700;">￥{{goods.goods_price | formatPrice}}</text>
          <uni-number-box @change="changeValue" v-if="showRadio" v-model="goods.goods_total" :min="1" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  const utils = require('../../common/tools')
  import {mapMutations} from 'vuex'
  export default {
    name: "goods-item",
    props: {
      goods: {
        type: Object,
        default: []
      },
      showRadio: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
      };
    },
    filters: {
      // 将价钱保留两位小数
      formatPrice(num) {
        // 防止价钱为字符串类型
        return Number(num).toFixed(2)
      }
    },
    methods: {
      // ...mapMutations('goodsCar',['updateGoodsCountTotal','updateGoodsPriceTotal']),
      // 跳转到商品详情
      switchPage() {
        utils._navigatorTo('/subPackages/goods-detail/goods-detail', {
          goods_id: this.goods.goods_id
        })
      },
      changeValue(value) {
        this.numberValue = value
        // 调用方法修改数量
        // 向外暴露事件，让父组件来进行修改
        this.$emit('update-Info',{goods_id:this.goods.goods_id,goods_total: value})
      },
      // 点击radio区域进行状态的改变
      changeStatus(e) {
        // goods_id,goods_status
        this.$emit('update-Info',{goods_id:this.goods.goods_id,goods_status: !this.goods.goods_status})
      },
      // 修改商品的数量和价格
      /* updateGoodsTotal(){
        this.updateGoodsCountTotal()
        this.updateGoodsPriceTotal()
      } */
    }
  }
</script>

<style lang="scss">
  .goods-item-container {
    display: flex;
    padding: 0 10px 3px;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;

    radio {
      transform: scale(.8);
    }

    .goods-item-left {
      width: 240rpx;
      height: 200rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .goods-item-right {
      padding: 8px 0;
      margin-left: 10px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      flex: 1;
      font-size: 12px;

      .price {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
</style>
